<template>
	<view class="grid flex_c">

		<view class="nav flex_r_between">
			<view class="back flex_r_around" @click="$native.backAction()">
				<image :src="$util.prefix('wheel/grid_back_icon.png')"></image>
			</view>
			<view class="box"></view>
		</view>

		<view class="nav_box"></view>

		<view class="title">最高免单</view>

		<view class="notice">
			<u-notice-bar color="#632F00" bgColor="transparent" :text="notice" direction="column"></u-notice-bar>
		</view>

		<view class="lucky flex_r_around">
			<LuckyGrid ref="myLucky" :rows="3" :cols="4" :blocks="blocks" :prizes="prizes" :button="button"
				:activeStyle="activeStyle" @start="startCallBack" @end="endCallBack" :defaultConfig="defaultConfig"
				:defaultStyle="defaultStyle" />
		</view>

		<view class="flex_c">
			<view class="tab flex_center" :id=" tab == 1 ?  'tab_1' : 'tab_2'">
				<view class="tab_item" @click="onTab(1)">获奖规则</view>
				<view class="tab_item" @click="onTab(2)">我的记录</view>
			</view>

			<view class="content">
				<view class="content1" v-if="tab == 1">
					为了鼓励广大用户在平台下单购买商品，平台特推出下单抽奖的活动，活动规则如下：
					<br />
					1、凡购买商品的订单金额大于10元，且订单完成后，即可获得一次抽奖机会。
					<br />
					2、活动中奖概率为100%，最低获得商品价值1%的现金奖励，最高免单。
					<br />
					3、参与活动获得的奖励返还至购物卡，只能消费不能提现。
				</view>
				<view class="content2" v-if="tab == 2">
					<view class="item" v-for="(item,index) in list" :key="index">
						<view class="top flex_r_between">
							<text>获得</text>
							<view>{{ item.prize_num || 0.00}}元</view>
						</view>
						<view class="bottom">
							<uni-dateformat :date="item.create_time * 1000" format="yyyy.MM.dd hh:mm"></uni-dateformat>
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 中奖弹窗 -->
		<u-popup :show="model" @close="close" mode="center" bgColor="transparent" :safeAreaInsetBottom="false">
			<view class="success flex_c">
				<view class="header flex_c">
					<text>恭喜您</text>
					<text>获得了{{model_num}}红包</text>
				</view>

				<view class="lottie">
					<image :id="showAni ? 'show' : ''" :src="$util.prefix('wheel/model.png')">
					</image>
				</view>

				<view class="btn" @click="close">
					<view>开心收下</view>
				</view>
			</view>
		</u-popup>

		<view class="loading flex_c" v-if="!loaded">
			<HevuLoading type="loading4" :opacity="0" loadingText="正在努力加载..." text-color="#FD2A53"
				loadingIconColor="#FD2A53" />

			<view style="height: 60rpx;"></view>
			<ProgressBar :Width="percent" Type="candy"></ProgressBar>
		</view>

	</view>
</template>

<script>
	import LuckyGrid from '@/components/@lucky-canvas/uni/lucky-grid';
	import HevuLoading from '@/components/hevu-loading/hevu-loading.vue';
	import ProgressBar from '@/components/Progress-Bar/Progress-Bar.vue';
	export default {
		components: {
			LuckyGrid,
			HevuLoading,
			ProgressBar
		},
		watch: {
			count: function(val, old) {
				if (val === this.load_image.length) { // 图片全部加载完成后跳转页面
					this.loaded = true;
				}
			},
		},

		data() {
			return {
				defaultConfig: {
					speed: 6,
					decelerationTime: 4000,
					accelerationTime: 4000,
				},

				defaultStyle: {
					background: '#AA7700'
				},

				blocks: [{
					padding: '10rpx 10rpx',
					borderRadius: 10
				}, ],

				activeStyle: {
					fontColor: '#552710',
					shadow: '1 1 1 skyblue'
				},

				button: {
					x: 1,
					y: 1,
					col: 2,
					row: 1,
					imgs: [{
						src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_btn.png',
						width: '100%'
					}],
					fonts: [{
						text: `剩余0次`,
						fontColor: '#A64F00',
						top: '54%',
						fontSize: '16px',
						fontWeight: 600
					}],
				},

				prizes: [],

				// 滚动消息通知
				notice: [

				],

				// tab切换
				tab: 1,

				// 中奖弹窗部分
				model: false,
				model_num: '',
				showAni: false,

				// 图片预加载 数组
				load_image: [
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_btn.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_back_icon.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_page_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_box_bg.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_tab_1.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_tab_2.png',
					'https://qiniu-cdn.maeiyun.com//h5static/wheel/model.png',
				],
				// 加载完成数量
				count: 0,
				// 预加载状态
				loaded: false,
				// 进度
				percent: 0,

				// 个人获奖
				list: [],
				page: 1,
				total: 0,

				isable: true, // 防连点

			}
		},
		methods: {

			// 点击抽奖按钮触发回调
			startCallBack() {
				this.$post('/active.trafficPrize/setPrize', {
					num: 1
				}, true, () => {
					uni.hideLoading();
					this.isable = true;
				}).then(res => {
					this.$refs.myLucky.play()
					uni.hideLoading();
					this.model_num = `${res.data.prize_total_num}${res.data.prize_list[0].name}`;
					// 模拟请求接口2s后返回数据
					const index = this.prizes.findIndex((element) => element.id == res.data.prize_list[
						0].id);
					// 得到中奖索引, 开始缓慢停止
					setTimeout(() => {
						this.$refs.myLucky.stop(index);
					}, 3000)
				})
			},

			// 抽奖结束触发回调
			endCallBack(res) {
				this.open();
			},

			close() {
				this.model = false;

				setTimeout(() => {
					this.showAni = false;
				}, 200);
			},

			open() {
				this.model = true;
				this.getInit(false);
				setTimeout(() => {
					this.showAni = true;
				}, 200);
			},

			getInit(refresh) {
				this.$post('/active.trafficPrize/getInitInfo').then(res => {

					this.button.fonts[0].text = `剩余${res.data.haveNum}次`;

					if (refresh) {
						for (var i = 0; i < res.data.prizeList.length; i++) {
							this.setList(i, res.data.prizeList[i]);
						}
					}

				});
			},

			setList(index, item) {
				if (index == 0) {
					this.prizes.push({
						x: 0,
						y: 0,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 1) {
					this.prizes.push({
						x: 1,
						y: 0,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 2) {
					this.prizes.push({
						x: 2,
						y: 0,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 3) {
					this.prizes.push({
						x: 3,
						y: 0,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 4) {
					this.prizes.push({
						x: 0,
						y: 1,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 5) {
					this.prizes.push({
						x: 3,
						y: 1,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 6) {
					this.prizes.push({
						x: 0,
						y: 2,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 7) {
					this.prizes.push({
						x: 1,
						y: 2,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 8) {
					this.prizes.push({
						x: 2,
						y: 2,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

				if (index == 9) {
					this.prizes.push({
						x: 3,
						y: 2,
						borderRadius: 10,
						id: item.id,
						fonts: [{
							text: item.num,
							fontColor: '#FFE483',
							top: '70%',
							fontSize: '14px',
							fontWeight: 500
						}],
						imgs: [{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_select.png',
								width: '100%',
								height: '100%'
							},
							{
								src: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								activeSrc: 'https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_item_image.png',
								width: '56%',
								top: '10%'
							},
						]
					});
				}

			},

			onTab(tab) {
				this.tab = tab;
				if (this.tab == 2) {
					this.page = 1;
					this.list = [];
					this.getList();
				}
			},

			preLoad() {
				for (let url of this.load_image) {
					let image = new Image()
					image.src = url
					image.onload = () => {
						this.count++
						//加载完毕事件
						// 计算图片加载的百分数，绑定到percent变量
						let percentNum = Math.floor(this.count / this.load_image.length * 100)
						this.percent = percentNum;
					}
				}

			},

			getNotice() {
				this.$get('/active.trafficPrize/getPrizeLog', {
					page: 1,
					limit: 100
				}).then(res => {
					res.data.data.forEach(element => {
						this.notice.push(`${element.nickname}获得了${element.prize_num}元`);
					});
				});
			},

			getList() {
				this.$get('/active.trafficPrize/getMyPrizeLog', {
					page: this.page
				}).then(res => {
					this.total = res.data.total;
					this.list.push(...res.data.data);
				})
			},

		},

		onLoad() {
			this.getInit(true);
			this.preLoad();
			this.getNotice();
		},

		onReachBottom() {
			if (this.total > this.list.length) {
				this.page++;
				this.getList();
			}
		}
	}
</script>


<style lang="less" scoped>
	.grid {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_page_bg.png) 0 0 no-repeat;
		background-size: 100%;
		background-color: #FFB476;
		min-height: 100vh;
		padding-bottom: 30rpx;
	}

	.title {
		font-weight: bold;
		font-size: 88rpx;
		// color: #855212;
		line-height: 132rpx;
		letter-spacing: 1px;
		text-shadow: 0px 2px 11px rgba(95, 56, 0, 0.4);
		text-align: left;
		font-style: normal;
		color: #FFF;
		// background: linear-gradient(90deg, #FFFFFF 0%, #F79B1B 100%);
		// background: linear-gradient(180deg, #FFFFFF 40%, #F79B1B 100%);
		// -webkit-background-clip: text;
		// -webkit-text-fill-color: transparent;
	}

	.notice {
		width: 478rpx;
		border-radius: 32rpx;
		margin: 40rpx 0 0rpx;
		background: linear-gradient(95deg, #EEC81A 0%, #EAB90D 9%, #FBF150 31%, #D48E0B 53%, #EDC418 100%);
		border-radius: 32rpx;

		/deep/ .u-notice-bar {
			padding: 10rpx 36rpx;
		}
	}

	.nav {
		position: fixed;
		top: 0;
		left: 0;
		height: calc(44px + var(--paging-head-top));
		padding: var(--paging-head-top) 32rpx 0;
		width: 100vw;
		z-index: 99;

		.back {
			image {
				width: 64rpx;
				height: 64rpx;
			}
		}

		.box {
			width: 64rpx;
		}
	}

	.lucky {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_box_bg.png) 0 0 no-repeat;
		background-size: 100%;
		width: 698rpx;
		height: 698rpx;
		margin: 48rpx 0;
	}

	#tab_1 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_tab_1.png) 0 0 no-repeat;
		background-size: 100%;
	}

	#tab_2 {
		background: url(https://qiniu-cdn.maeiyun.com//h5static/wheel/grid_tab_2.png) 0 0 no-repeat;
		background-size: 100%;
	}

	.tab {
		width: calc(694rpx + 0.5px);
		height: 200rpx;
		align-items: flex-start;
		position: relative;
		z-index: 2;

		.tab_item {
			flex: 1;
			font-weight: bold;
			font-size: 36rpx;
			color: #FFFFFF;
			line-height: 54rpx;
			text-shadow: inset 0px 1px 10px rgba(255, 255, 255, 0.4);
			text-align: center;
			padding: 30rpx 0;
		}
	}

	.content {
		width: 686rpx;
		background: #E0002D;
		border: calc(2rpx + 2rpx) solid #F3D160;
		padding-top: 40rpx;
		margin-top: -40rpx;
		border-radius: 30rpx;
		box-sizing: content-box;

		.content1 {
			font-weight: 500;
			font-size: 26rpx;
			color: #FFFFFF;
			line-height: 48rpx;
			padding: 0 40rpx 70rpx;
		}

		.content2 {
			padding: 0 24rpx 24rpx;

			.item {
				height: 148rpx;
				background: #8F001D;
				border-radius: 24rpx;
				padding: 28rpx 32rpx;
				margin-bottom: 20rpx;

				.top {
					margin-bottom: 10rpx;

					text {
						font-weight: 500;
						font-size: 32rpx;
						color: #FFFFFF;
					}

					view {
						font-weight: 500;
						font-size: 36rpx;
						color: #FFCA11;
					}
				}

				.bottom {
					font-size: 26rpx;
					color: #FFFFFF;
					line-height: 37rpx;
				}

			}
		}
	}

	.success {
		.header {
			text {
				font-weight: 600;
				font-size: 56rpx;
				color: #FBF4DA;
				line-height: 80rpx;
				text-align: center;
			}
		}

		.lottie {
			width: 100vw;
			height: 656rpx;

			image {
				width: 100vw;
				height: 656rpx;
				transform: scale(0%);
				transition: 1s ease-out 1s;
			}

			#show {
				transform: scale(100%);
				transition: 1s ease-out;
			}
		}



		.btn {
			width: 496rpx;
			height: 104rpx;
			background: linear-gradient(179deg, rgba(255, 240, 180, 1), rgba(213, 147, 73, 1), rgba(202, 162, 166, 1), rgba(148, 99, 43, 1), rgba(249, 227, 152, 1));
			border-radius: 56rpx;
			padding: 4rpx;
			overflow: hidden;

			view {
				width: 488rpx;
				height: 96rpx;
				background: linear-gradient(180deg, #FF1037 0%, #FF7C4C 100%);
				border-radius: 56rpx;
				font-weight: 600;
				font-size: 36rpx;
				color: #FFFBDC;
				line-height: 96rpx;
				text-align: center;
			}
		}
	}

	.loading {
		position: fixed;
		z-index: 99;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: #FFF;
		padding-top: 20vh;
	}
</style>